<template>
  <el-dialog v-model="show" width="400" title="全局设置">
    <el-form label-width="120">
      <el-form-item label="视图单位">
        <el-radio-group v-model="formObj.unit">
          <el-radio-button label="day">小时</el-radio-button>
          <el-radio-button label="month">天</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日工作时间段">
        <el-time-picker
            v-model="formObj.workTime"
            :disabled="formObj.unit === 'month'"
            is-range
            :disabled-seconds="disabledSeconds"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeModal">关闭</el-button>
        <el-button type="primary" @click="confirmModal">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import {defaultColumnType, getDefaultRangeTime} from "@/views/defaultData";

const emit = defineEmits(['confirm']);
let show = ref(false);

let formObj = reactive({
  workTime: getDefaultRangeTime(),
  unit: defaultColumnType
})

const disabledSeconds = (hour: number, minute: number) => {
  return makeRange(1, 59);
}

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}

function open({unit, timeRange}) {
  formObj.unit = unit
  formObj.workTime = getDefaultRangeTime(timeRange[0], timeRange[1])
  show.value = true;
}

function closeModal() {
  show.value = false;
}
function confirmModal() {
  emit('confirm', formObj);
  closeModal();
}

defineExpose({
  open
})
</script>

<style scoped>

</style>
